<template>
	<view>
		<u-navbar back-text="返回" title="提交订单" title-width="450" :border-bottom="false" :back-text-style="{color: 'rgba(16,142,233,1)' }"
		 back-icon-color="#108EE9">
		</u-navbar>
		<view class="content">
			<view class="top-box">
				<view class="left">
					<view class="left-icon">
						<image src="../../../static/images/buildingmaterials/address.png" mode=""></image>
					</view>
					<view class="user-box">
						<view class="title">
							王建国 <text>12345678912</text>
						</view>
						<view class="address-text">
							四川省成都市武侯区天华路
						</view>
					</view>
				</view>
				<view class="right">
					<image src="../../../static/images/common/right.png" mode=""></image>
				</view>
			</view>
			<u-form :model="form" ref="uForm" label-width="160" :error-type=" ['toast']" :label-style="{fontSize:'28rpx',color:'rgba(153,153,153,1)'}">
				<u-form-item label="运输货运" prop="name" label-position="top">
					<view class="work-status address-select">
						<u-input class="name" :custom-style="style" v-model="form.num" :clearable="false" input-align="left" />
						<image src="../../../static/images/common/right.png" mode=""></image>
					</view>
				</u-form-item>
				<u-form-item label="期望送达日期" prop="name" label-position="top">
					<view class="work-status address-select">
						<u-input class="name" :custom-style="style" v-model="form.num" :clearable="false" input-align="left" />
						<image src="../../../static/images/common/right.png" mode=""></image>
					</view>
				</u-form-item>
			</u-form>
			<view class="company-box">
				华新建材门市有限公司
			</view>
			<view class="company-item">
				<view class="item-left">
					<view class="img-box">
						<image src="../../../static/images/develop/goods.png" mode=""></image>
					</view>
					<view class="text-box">
						<view class="title">
							高透明有机玻璃板
						</view>
						<view class="type">
							<view class="item-type">
								磨砂
							</view>
							<view class="item-type">
								透明
							</view>
						</view>
					</view>
				</view>
				<view class="item-right">
					<view class="money">
						￥655
					</view>
					<view class="num">
						x1
					</view>
				</view>
			</view>
			<view class="all-box">
				<view class="fill">
					
				</view>
				<view class="all-num">
					<text>共1件</text>
					<text class="text">小计：</text>
					￥655.00
				</view>
			</view>
			<view class="invoice-box">
				<view class="left">
					添加开票信息
				</view>
				<view class="right">
					<!-- <image src="../../../static/images/job/unactive.png" mode=""></image> -->
					<image src="../../../static/images/job/isactive.png" mode=""></image>
				</view>
			</view>
			<view class="company-card">
				<view class="left">
					<view class="title">
						王建国有限公司
					</view>
					<view class="ordernoe">
						GHDFG3434845334654
					</view>
				</view>
				<view class="right">
					<image src="../../../static/images/common/right.png" mode=""></image>
				</view>
			</view>
			<view class="remark">
				订单备注
			</view>
			<textarea class="textarea-box" value="" placeholder="选填，请先和商家协商一致" placeholder-class="place"/>
		</view>
		<cart></cart>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				style: {
					'fontSize': '32rpx',
					color: 'rgba(102,102,102,1)'
				},
				form:{
					num:''
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		padding: 40rpx 30rpx 180rpx;
		width: 100%;
		box-sizing: border-box;
		.top-box{
			width: 100%;
			padding:47rpx 40rpx 27rpx 10rpx;
			background:rgba(246,246,246,1);
			box-sizing: border-box;
			opacity:1;
			border-radius:20rpx;
			display: flex;
			.left{
				flex: 1;
				display: flex;
				.left-icon{
					width: 98rpx;
					height: 104rpx;
					margin-right: 10rpx;
					image{
						width: 98rpx;
						height: 104rpx;
					}
				}
				.user-box{
					.title{
						font-size:30rpx;
						font-weight:600;
						line-height:40rpx;
						color:rgba(102,102,102,1);
						opacity:1;
						text{
							margin-left: 20rpx;
							display: inline-block;
							font-size:26rpx;
							font-weight:400;
							color:rgba(153,153,153,1);
							opacity:1;
						}
					}
					.address-text{
						margin-top: 10rpx;
						font-size:28rpx;
						font-weight:400;
						line-height:37rpx;
						color:rgba(102,102,102,1);
						opacity:1;
					}
				}
			}
			.right{
				margin-top: 30rpx;
				width: 14rpx;
				height: 24rpx;
				image{
					width: 14rpx;
					height: 24rpx;
				}
			}
		}
		.company-box{
			margin-top: 30rpx;
			font-size:32rpx;
			font-weight:600;
			line-height:43rpx;
			color:rgba(51,51,51,1);
			opacity:1;
			margin-bottom: 30rpx;
		}
		.company-item{
			display: flex;
			width: 100%;
			justify-content: space-between;
			.item-left{
				flex: 1;
				display: flex;
				.img-box{
					width: 160rpx;
					height: 160rpx;
					border-radius:10rpx;
					margin-right: 30rpx;
					image{
						width: 160rpx;
						height: 160rpx;
						border-radius:10rpx;
					}
				}
				.text-box{
					.title{
						font-size:28rpx;
						font-weight:600;
						line-height:37rpx;
						color:rgba(51,51,51,1);
						opacity:1;
					}
					.type{
						margin-top: 10rpx;
						display: flex;
						.item-type{
							margin-right: 20rpx;
							padding: 0 10rpx;
							height:40rpx;
							background:rgba(246,246,246,1);
							opacity:1;
							border-radius:6rpx;
							box-sizing: border-box;
							font-size:24rpx;
							font-weight:400;
							line-height:40rpx;
							color:rgba(51,51,51,1);
							opacity:1;
						}
					}
				}
			}
			.item-right{
				.money{
					font-size:28rpx;
					font-weight:600;
					line-height:37rpx;
					color:rgba(51,51,51,1);
					opacity:1;
				}
				.num{
					text-align: right;
					margin-top: 10rpx;
					font-size:26rpx;
					font-weight:600;
					line-height:35rpx;
					color:rgba(153,153,153,1);
					opacity:1;
				}
			}
		}
		.all-box{
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			.fill{
				flex: 1;
			}
			.all-num{
				font-size:36rpx;
				font-weight:600;
				line-height:48rpx;
				color:rgba(51,51,51,1);
				opacity:1;
				text{
					display: inline-block;
					font-size:26rpx;
					font-weight:600;
					color:rgba(51,51,51,1);
					opacity:1;
				}
				.text{
					margin-left: 27rpx;
					margin-right: 10rpx;
				}
			}
		}
		.invoice-box{
			margin-top: 39rpx;
			padding-bottom: 16rpx;
			border-bottom: 1rpx solid rgba(223,223,223,1);
			display: flex;
			justify-content: space-between;
			.left{
				font-size:26rpx;
				font-weight:400;
				line-height:44rpx;
				color:rgba(102,102,102,1);
				opacity:1;
			}
			.right{
				width: 44rpx;
				height: 44rpx;
				image{
					width: 44rpx;
					height: 44rpx;
				}
			}
		}
		.remark{
			margin-top: 22rpx;
			margin-bottom: 20rpx;
			font-size:26rpx;
			font-weight:400;
			line-height:35rpx;
			color:rgba(102,102,102,1);
			opacity:1;
		}
		.textarea-box{
			width: 100%;
			height:200rpx;
			background:rgba(246,246,246,1);
			opacity:1;
			border-radius:20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			font-size:26rpx;
			font-weight:400;
			line-height:35rpx;
			// color:rgba(153,153,153,1);
			opacity:1;
		}
		.place{
			font-size:26rpx;
			font-weight:400;
			line-height:35rpx;
			color:rgba(153,153,153,1);
			opacity:1;
		}
		.company-card{
			width:100%;
			margin-top: 20rpx;
			background:rgba(228,205,112,0.2);
			border-radius:20rpx;
			padding: 37rpx 40rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			.left{
				.title{
					font-size:30rpx;
					font-weight:600;
					line-height:40rpx;
					color:rgba(102,102,102,1);
					opacity:1;
				}
				.ordernoe{
					margin-top: 10rpx;
					font-size:28rpx;
					font-weight:400;
					line-height:37rpx;
					color:rgba(102,102,102,1);
					opacity:1;
				}
			}
			.right{
				width: 14rpx;
				height: 24rpx;
				margin-top: 30rpx;
				image{
					width: 14rpx;
					height: 24rpx;
				}
			}
		}
	}
	.address-select{
		.phone-right{
			margin-top: 10rpx;
			font-size:26rpx;
			font-weight:400;
			color:rgba(211,176,104,1);
			opacity:1;
			display: flex;
			line-height: 70rpx;
			view{
				image{
					width: 46rpx;
					height: 28rpx;
				}
			}
		}
		image{
			width: 36rpx;
			height: 46rpx;
		}
	}
	.work-status {
		width: 100%;
		display: flex;
		justify-content: space-between;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 43rpx;
		color: rgba(102, 102, 102, 1);
		opacity: 1;
	
		.kind-item {
			position: relative;
			padding: 6rpx;
			margin-left: 20rpx;
	
			image {
				width: 26rpx;
				height: 26rpx;
				position: absolute;
				top: -14rpx;
				right: -10rpx;
			}
		}
	
		.kind-right {
			margin-top: 16rpx;
		}
	
		image {
			width: 14rpx;
			height: 24rpx;
			margin-top: 12rpx;
			margin-left: 24rpx;
		}
	}
</style>
